<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="物资绑定明细" name="material">
        <MaterialTabs
          v-if="activeName==='material'"
          ref="materialTabs"
          :prj-params="prjParams"
          :table-header="tableHeader"
          :is-edit="isEdit"
        />
      </el-tab-pane>
      <el-tab-pane label="服务绑定明细" name="service">
        <ServiceTabs
          v-if="activeName==='service'"
          ref="serviceTabs"
          :prj-params="prjParams"
          :table-header="tableHeader"
          :is-edit="isEdit"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="foot-btn">
      <TButton :btn-config="footerBtn" @propClick="handleClick" />
    </div>
  </div>
</template>

<script>
import MaterialTabs from '@/views/acceptanceManagement/materialServiceBind/components/materialTabs.vue'
import ServiceTabs from '@/views/acceptanceManagement/materialServiceBind/components/serviceTabs.vue'
import TButton from '@/components/basic/TButton.vue'
import { getQueryObject } from '@/utils'
import { queryHeaderIniInfoList } from '@/api/acceptanceManagement/materialServiceBind'

export default {
    name: 'MaterialService',
    components: {
        MaterialTabs,
        ServiceTabs,
        TButton
    },
    props: {},
    data() {
        return {
            activeName: 'material',
            prjParams: {},
            tableHeader: [],
            isEdit: true,
            footerBtn: []
        }
    },
    computed: {},
    async created() {
        const {
            prjId, // 项目流水号
            parentPrjId, // 父项目流水号
            parentPrjCode, // 父项目编码
            workItemId,
            isEdit
        } = getQueryObject()
        this.prjParams = {
            prjId, // 项目id
            parentPrjId, // 项目id
            parentPrjCode, // 项目id
            subPrjList: JSON.parse(window.sessionStorage.getItem('subPrjList')) || [], // 批量操作单项工程列表
            workItemId
        }
        this.isEdit = Boolean(+isEdit)
        await this.getTableDataHeader()
        if (this.isEdit) {
            this.footerBtn = [
                {
                    label: '确认绑定结果',
                    fun: 'handleSend'
                },
                {
                    label: '关闭',
                    fun: 'handleClose'
                }
            ]
        } else {
            this.footerBtn = [
                {
                    label: '确认绑定结果',
                    fun: 'handleSend'
                },
                {
                    label: '取消确认',
                    fun: 'handleCancel'
                },
                {
                    label: '关闭',
                    fun: 'handleClose'
                }
            ]
        }
    },
    mounted() {
        window.parent.postMessage({ height: 300, type: 'materialServiceHeight' }, this.$fixIframeArr())
    },
    methods: {
        handleClick(fn) {
            this[fn]()
        },
        // 获取表头数据
        async getTableDataHeader() {
            const params = {
                prjId: this.prjParams.prjId,
                workItemId: this.prjParams.workItemId
            }
            await queryHeaderIniInfoList(params).then(res => {
                if (+res.code !== 200) {
                    return Promise.reject(res)
                }
                this.tableHeader = res.data
            })
        },
        // 点击tab时
        handleTabClick(tab) {
            console.log(tab.index)
        },
        // 确认
        async handleSend() {
            if (this.activeName === 'material') {
                this.$refs.materialTabs.handleSend()
            } else {
                this.$refs.serviceTabs.handleSend()
            }
        },
        // 关闭
        handleClose() {
            const body = window.top.document.body
            const _message = body.getElementsByClassName('el-message')
            if (_message && _message.length > 0) {
                for (let i = 0; i < _message.length; i++) {
                    body.removeChild(_message[i])
                    this.handleClose()
                }
            } else {
                window.parent.postMessage({ visible: false, type: 'materialServiceBind' }, this.$fixIframeArr())
                window.close()
            }
        },
        // 取消确认
        handleCancel() {
            if (this.activeName === 'material') {
                this.$refs.materialTabs.handleCancel()
            } else {
                this.$refs.serviceTabs.handleCancel()
            }
        }
    }

}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
    line-height: 18px;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    margin-bottom: 5px;
}

::v-deep .el-table--scrollable-x .el-table__fixed {
    height: calc(100% - 12px) !important;
}

::v-deep .el-message-box__wrapper{
    z-index: 50000 !important;
}

.foot-btn {
    margin: 20px 0;
    text-align: center;

    //.el-button {
    //    min-width: 100px;
    //    height: 24px;
    //    line-height: 0;
    //    margin-left: 24px;
    //}
}
</style>
